<template>
  <div class="userManage-wrapper">
    <div v-if="isShow">
      <a-space class="center-box">
        <span>交管用户账号</span>
        <div>
          <a-button type="dashed" danger style="margin: 0 5px" @click="deleteMany">
            <DeleteTwoTone twoToneColor="#eb2f96" />多选删除
          </a-button>
        </div>
      </a-space>
      <a-table :columns="columns" :data-source="traffic" :row-selection="rowSelection" size="small"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" :pagination="{ pageSize: 5 }">
        <template #name="{ record }" slot="operation">
          <!-- :data数据  -->
          <a-button @click="hide(record)">降级</a-button>
          <a-button danger @click="userDelete(record)">删除</a-button>
        </template>
      </a-table>
    </div>
    <div v-else>
      <a-space class="center-box">
        <span>普通用户账号</span>
        <div>
          <a-button type="dashed" danger style="margin: 0 5px" @click="deleteMany">
            <DeleteTwoTone twoToneColor="#eb2f96" />多选删除
          </a-button>
        </div>
      </a-space>
      <a-table :pagination="{ pageSize: 5 }" :columns="columns" :data-source="common" size="small"
        :row-selection="rowSelection" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
        <template #name="{ record }" slot="operation">
          <!-- :data数据  -->
          <a-button @click="hide(record)">升级</a-button>
          <a-button danger @click="userDelete(record)">删除</a-button>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
/* message弹窗 */
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
import { onMounted, ref, computed, unref, reactive, toRef, toRefs } from "vue"
/* 引用图标组件 */
import { DeleteTwoTone, PlusOutlined } from "@ant-design/icons-vue"
import axios from "axios"
/* 接收父组件的数据 */
const props = defineProps({
  isShow: {
    type: Boolean,
    default: true
  }
})
const { isShow } = toRefs(props)
onMounted(() => {
  initUserData()
})

/* 搜索功能 */
const value = ref("")
const onSearch = (searchValue) => {
  console.log("use value", searchValue)
  console.log("or use this.value", value.value)
}

const columns = [
  {
    title: "序号",
    dataIndex: "name",
    key: "name",
    width: "10%",
  },
  {
    title: "用户名",
    dataIndex: "user",
    key: "user",
    width: "15%",
  },
  {
    title: "密码",
    dataIndex: "password",
    width: "20%",
    key: "password",
  },
  {
    title: "类型",
    dataIndex: "type",
    width: "20%",
    key: "type",
  },
  {
    title: "登录状态",
    dataIndex: "onlinestatus",
    width: "10%",
    key: "onlinestatus",
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: "20%",
    key: "operation",
    slots: { customRender: "name" }, //绑定插槽
  },
]

/* 升级降级 */
const hide = (e) => {
  const { type, user } = e
  if (type == "交管用户") {
    console.log(type, user)
    const json = {
      user_name: user,
      user_type: type == "交管用户" ? "common" : "traffic",
    }
    axios.post("http://localhost:3000/userupdown", json).then(() => {
      initUserData()
      message.success('降级成功')
    })
  } else if (type == "普通用户") {
    console.log(type, user)
    const json = {
      user_name: user,
      user_type: type == "普通用户" ? "traffic" : "common",
    }
    axios.post("http://localhost:3000/userupdown", json).then(() => {
      initUserData()
      message.success('升级成功')
    })
  }
}
/* table表格删除功能 */
function userDelete(event) {
  const { user, operation } = event
  console.log(user, operation)
  const json = {
    user_name: user,
    user_isDelete: "0",
  }
  axios.put("http://localhost:3000/user", json).then(() => {
    initUserData()
    message.success('删除成功')
  })
}
/* 多选删除 */
const deleteMany = () => {
  if (choice.value != []) {
    choice.value.forEach((item) => {
      console.log(item.user)
      axios.put("http://localhost:3000/user", {
        user_name: item.user,
        user_isDelete: "0",
      }).then(() => {
        initUserData()
      })
    })
  }
  message.success('删除成功')
}
/* 交管用户数据 */
const traffic = ref([])
/* 普通用户数据 */
const common = ref([])
/* 选中数据 */
const choice = ref([])

const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys, selectedRows) => {
    choice.value = selectedRows
    // console.log(selectedRows)
  },
  // onSelect: (record, selected, selectedRows) => {
  //   console.log(record, selected, selectedRows)
  // },
  // onSelectAll: (selected, selectedRows, changeRows) => {
  //   console.log(selected, selectedRows, changeRows)
  // },
})

// 向普通用户push数据
function commonpush() {
  common.value = []
  userSortData.common.map((item, index) => {
    common.value.push({
      key: `${index}`,
      name: `${(index += 1)}`,
      user: `${item.user_name}`,
      password: `${item.user_password}`,
      type: item.user_type == "common" ? "普通用户" : "",
      onlinestatus: item.user_onlinestatus == "1" ? "在线" : "离线",
      operation: "1",
    })
  })
}
// 向交管用户push数据
function trafficpush() {
  traffic.value = []
  userSortData.traffic.map((item, index) => {
    traffic.value.push({
      key: `${index}`,
      name: `${(index += 1)}`,
      user: `${item.user_name}`,
      password: `${item.user_password}`,
      type: item.user_type == "traffic" ? "交管用户" : "",
      onlinestatus: item.user_onlinestatus == "1" ? "在线" : "离线",
      operation: "1",
    })
  })
}
const initUserData = async () => {
  await getSortUser()
  await commonpush()
  await trafficpush()
}
/* 用户分类的数据 */
const userSortData = reactive({
  common: [],
  traffic: [],
})

/* 操作中编辑和删除 */
const handleEdit = (e) => {
  console.log(e)
}
const handleDelete = (t) => {
  console.log(t)
}

/* 请求用户数据 */
async function getSortUser() {
  const common = {
    user_type: "common",
  }
  const traffic = {
    user_type: "traffic",
  }
  const res = await axios.post("http://localhost:3000/usersort", common)
  const { code, msg, result } = res.data
  userSortData.common = result
  // console.log(result)
  await axios.post("http://localhost:3000/usersort", traffic).then((res) => {
    const { code, msg, result } = res.data
    userSortData.traffic = result
    // console.log(result)
  })
  // console.log(userSortData)
}
</script>

<style scoped>
.select-width {
  width: 150px;
  margin-right: 16px;
  margin-bottom: 10px;
}

.select-bottom {
  margin-bottom: 10px;
}

.center-box {
  margin-bottom: 16px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
